<template>
  <div>
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="角色分配" name="first">
          <div>
            <el-row>
              <el-col :span="1"><br></el-col>
              <el-col :span="5">
                <el-input v-model="dto.name" placeholder="请输入员工姓名" clearable></el-input>
              </el-col>
              <el-col :span="1">
                <el-button type="primary" icon="el-icon-search" @click="getEmployeeListForRole()">搜索</el-button>
              </el-col>
            </el-row>
            <el-row><br><br></el-row>
            <el-row>
              <el-col :span="1"><br></el-col>
              <el-col :span="17">
                <el-table
                  :data="employeeList"
                  style="width: 100%">
                  <el-table-column
                    label="序号"
                    type="index"
                    width="50">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="员工姓名"
                    width="150">
                  </el-table-column>
                  <el-table-column
                    prop="account"
                    label="员工账户"
                    width="150">
                  </el-table-column>
                  <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                      <el-button
                        size="mini" type="primary" icon="el-icon-edit"
                        @click="handleEdit(scope.row)">分配角色</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="1"><br></el-col>
              <el-col :span="5">
                <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page.sync="dto.page"
                  :page-size="dto.size"
                  layout="total, prev, pager, next"
                  :total="total">
                </el-pagination>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="权限管理" name="second">
          <div>
            <el-row>
              <el-col :span="1"><br></el-col>
              <el-col :span="17">
                <el-table
                  :data="roleList"
                  style="width: 100%">
                  <el-table-column
                    label="序号"
                    type="index"
                    width="50">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="角色名"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    prop="description"
                    label="角色描述"
                    width="150">
                  </el-table-column>
                  <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                      <el-button
                        size="mini" type="info" icon="el-icon-info"
                        @click="handleData(scope.row)">权限管理</el-button>
                        <el-button
                        size="mini" type="primary" icon="el-icon-edit"
                        @click="handleAdd(scope.row)">权限添加</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 角色表单弹出框 -->
    <el-dialog title="分配角色" :visible.sync="dialogRoleVisible" width="50%" @close="close('ruleForm')">
      <div>
        <el-row>
          <el-col :span="6"><el-checkbox v-model="roles.admin.status" label="超级管理员" border></el-checkbox></el-col>
          <el-col :span="6"><el-checkbox v-model="roles.customer.status" label="平台用户" border></el-checkbox></el-col>
          <el-col :span="6"><el-checkbox v-model="roles.warehouse_admin.status" label="仓库管理员" border></el-checkbox></el-col>
          <el-col :span="6"><el-checkbox v-model="roles.system_admin.status" label="系统管理员" border></el-checkbox></el-col>
        </el-row>
        <el-row><br></el-row>
        <el-row>
          <el-col :span="6"><el-checkbox v-model="roles.order_admin.status" label="订单管理员" border></el-checkbox></el-col>
          <el-col :span="6"><el-checkbox v-model="roles.financial_admin.status" label="财务管理员" border></el-checkbox></el-col>
          <el-col :span="6"><el-checkbox v-model="roles.data_admin.status" label="数据管理员" border></el-checkbox></el-col>
          <el-col :span="6"><el-checkbox v-model="roles.authority_admin.status" label="权限管理员" border></el-checkbox></el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 权限表单弹出框 -->
    <el-dialog title="权限管理" :visible.sync="dialogPermsVisible" width="50%" @close="close('ruleForm')">
      <div>
        <el-table
          :data="permsList"
          style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="name"
            label="权限名"
            width="200">
          </el-table-column>
          <el-table-column
            prop="description"
            label="权限描述"
            width="150">
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                size="mini" type="danger" icon="el-icon-delete"
                @click="handleDelete(scope.row)">权限删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close('ruleForm')">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加权限弹出框 -->
    <el-dialog title="添加权限" :visible.sync="dialogAddPermsVisible" width="30%" @close="close('ruleForm')">
      <el-form :model="perms" :rules="rules" ref="ruleForm">
        <el-form-item label="权限名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="perms.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限描述" :label-width="formLabelWidth" prop="description">
          <el-input v-model="perms.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="handleConfirmAdd('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uid: '',
      activeName:"first",
      dto:{
        name:'',
        page:1,
        size:5
      },
      total:'',
      employeeList:[],
      dialogRoleVisible:false,
      employeeRoleList:[],
      roles:{
        admin:{id:1,status:false},  
        customer:{id:2,status:false},
        warehouse_admin:{id:3,status:false},
        system_admin:{id:4,status:false},
        order_admin:{id:5,status:false},
        financial_admin:{id:6,status:false},
        data_admin:{id:7,status:false},
        authority_admin:{id:8,status:false},
      },
      roleList:[],
      dialogPermsVisible:false,
      permsList:[],
      total:[],
      permsDto:{
        id:'',
        page:1,
        size:5
      },
      dialogAddPermsVisible:false,
      rules:[],
      perms:{
        name:'',
        description:''
      },
      permsData:{},
      formLabelWidth:"80px"
    }
  },
  mounted(){
    this.getEmployeeListForRole()
    this.getRoleList()
  },
  methods:{
    getEmployeeListForRole(){
      this.$axios.get('/employee/getEmployeeListForRole',{
        params:this.dto
      }).then(res=>{
        if (res.data.code == 200) {
          this.employeeList = res.data.data.data
          this.total = res.data.data.total
        }
      })
    },
    handleEdit(row){
      //重置roles
      this.roles = {
        admin:{id:1,status:false},  
        customer:{id:2,status:false},
        warehouse_admin:{id:3,status:false},
        system_admin:{id:4,status:false},
        order_admin:{id:5,status:false},
        financial_admin:{id:6,status:false},
        data_admin:{id:7,status:false},
        authority_admin:{id:8,status:false},
      },
      //向后端发请求，请求员工的角色信息
      this.$axios.get('/role/getEmployeeRoleList/' + row.id).then(res=>{
        if (res.data.code == 200) {
          let list = res.data.data
          let data = this.roles
          list.forEach(item => {
              let name = item.name.replace("ROLE_", "")
              if (data.hasOwnProperty(name)) { // 确保data中有这个属性
                  data[name].status = true;
              }
          });
          this.roles = data
          this.uid = row.id
          this.dialogRoleVisible = true
        }
      })
    },
    close(formName){
      this.dialogRoleVisible = false
      this.dialogPermsVisible = false
      this.dialogAddPermsVisible = false
    },
    handleConfirm(){
      let list = [];
      let roles = this.roles;
      // 遍历roles对象
      for (let role in roles) {
          // 检查当前属性值（这里是对象）的status是否为true
          if (roles[role].status) {
              // 如果为true，则将该属性的id添加到list中作为一个新元素的id属性
              list.push({ id: roles[role].id });
          }
      }
      let data = {
        id : this.uid,
        roles : list
      }
      this.$axios.post('/role/editEmployeeRole',data).then(res=>{
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '编辑成功!'
          });
          this.dialogRoleVisible = false
          getEmployeeListForRole()
        }
      })
    },
    getRoleList(){
      this.$axios.get('/role/getRoleList').then(res=>{
        if (res.data.code == 200) {
          this.roleList = res.data.data
        }
      })
    },
    handleData(row){
      this.dialogPermsVisible = true
      this.permsDto.id = row.id
      this.$axios.get('/perms/getPermsByRoleId',{
        params:this.permsDto
      }).then(res=>{
        if(res.data.code == 200){
          this.permsList = res.data.data.data
          this.total = res.data.data.total
        }
      })
    },
    handleAdd(row){
      this.dialogAddPermsVisible = true
      this.permsData = {
        id:row.id,
        perms:this.perms
      }
    },
    handleConfirmAdd(){
      this.$axios.post('/perms/addPerms',this.permsData).then(res=>{
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.dialogAddPermsVisible = false
        }
      })
    },
    handleDelete(row){
      this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/perms/deletePerms/' + row.id).then(res=>{
          if (res.data.code == 200) {
            if (res.data.data){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.dialogPermsVisible = false
            }
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    }
  }
}
</script>

<style scoped>
.box-card {
  height: 79vh;
}
</style>